var body = null;
var canvas = null;
var doc = document;
var ctx = null;
var redValue = null;
var greenValue = null;
var blueValue = null;

function init(elem, canvasId) {
    body = elem;
    canvas = document.getElementById(canvasId);
    redValue = document.getElementById("redValue");
    greenValue = document.getElementById("greenValue");
    blueValue = document.getElementById("blueValue");
    canvas.init2D();
}

function draw(r, g, b) {
    canvas.clear();
    canvas.box(0, 0, 255, 255, (new CanvasColor(r, g, b)).getHEX());
}

CanvasColor = function(r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
};

CanvasColor.prototype.setValues = function(r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
};

CanvasColor.prototype.setR = function(r) {
    this.r = r;
};

CanvasColor.prototype.setG = function(g) {
    this.g = g;
};

CanvasColor.prototype.setB = function(b) {
    this.b = b;
};

CanvasColor.prototype.getHEX = function() {
    var rstr = this.r.toString(16);
    var gstr = this.g.toString(16);
    var bstr = this.b.toString(16);
    var from = "00";
    var ret = this.replaceFromEnd(from, rstr) + this.replaceFromEnd(from, gstr) + this.replaceFromEnd(from, bstr);
    return ret;
};

CanvasColor.prototype.replaceFromEnd = function(from, that) {
    var tmp = from.substring(0, from.length - that.length, that);
    return (tmp + that);
};

HTMLCanvasElement.prototype.init2D = function() {
    ctx = canvas.getContext("2d");
    this.coordinates = new Coordinates(this);
};

HTMLCanvasElement.prototype.defaultColor = "000000";

HTMLCanvasElement.prototype.line = function(xfrom, yfrom, xto, yto, color) {
    ctx.beginPath();
    ctx.moveTo(this.coordinates.X(xfrom), this.coordinates.Y(yfrom));
    ctx.lineTo(this.coordinates.X(xto), this.coordinates.Y(yto));
    if (color) {
        ctx.strokeStyle = "#" + color;
    } else {
        ctx.strokeStyle = "#" + this.defaultColor;
    }
    ctx.stroke();
};
HTMLCanvasElement.prototype.box = function(x, y, xto, yto, color) {
    if (color) {
        ctx.fillStyle = "#" + color;
    } else {
        ctx.fillStyle = "#" + this.defaultColor;
    }
    // Problems with drawing with direction
    var xa = 0;//this.coordinates.X(x);
    var ya = 0;//this.coordinates.Y(y);
    var xb = 255;//this.coordinates.X(xto);
    var yb = 255;//this.coordinates.Y(yto);
    ctx.fillRect(xa, ya, xb, yb);
};

HTMLCanvasElement.prototype.clear = function() {
    ctx.clearRect(0, 0, this.width, this.height);
};

Coordinates = function(canvas) {
    this.canvas = canvas;
};

Coordinates.prototype.X = function(x) {
    return x;
};

Coordinates.prototype.Y = function(y) {
    return (this.canvas.height - y);
};

function calcColor() {
    var r = parseInt(redValue.value.toString());
    var g = parseInt(greenValue.value.toString());
    var b = parseInt(blueValue.value.toString());
    draw(r, g, b);
}

function onChangeSlider(id) {
    var label = document.getElementById(id + "Label");
    var elem = document.getElementById(id);
    label.textContent = elem.value.toString();
    calcColor();
}

Logger = function(cons) {
    this.timer = new TimerExpense();
    this.console = null;
    if (cons !== undefined) {
        this.console = cons;
    }
};

Logger.prototype.log = function(msg) {
    if (this.console !== undefined && this.console !== null) {
        this.console.log(msg);
    }
};

Logger.prototype.start = function() {
    this.timer.start();
};

Logger.prototype.stop = function() {
    var end = this.timer.stop();
    this.log("Time expense: " + end);
    return end;
};

TimerExpense = function() {
    this.startTime = null;
    this.endTime = null;
};

TimerExpense.prototype.start = function() {
    this.startTime = new Date().getMilliseconds();
};

TimerExpense.prototype.stop = function() {
    this.endTime = new Date().getMilliseconds();
    var expense = this.endTime - this.startTime;
    return expense;
};

var logger = new Logger(console);
var timerExpense = new TimerExpense();

function runButton() {
    logger.start();
    longLasting(); 
    logger.stop();
}

function longLasting() {
    var average = 0;
    for (var i = 10; i < 1000000; i++) {
        average = i + (i * i) / 2;
    }
}
